<template>
  <el-pagination
    @size-change = "handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page"
    :page-size ='size'
    :page-sizes="pageSizes"
    layout="total,sizes, prev, pager, next, jumper"
    :total="count">
  </el-pagination>
</template>
<!--   -->
<script>
  export default {
    props: ['page', 'count', 'size'],
    data () {
      return {
        curPage: this.page,
        pageSizes: [this.size, this.size * 2, this.size * 3],
        curSize: this.size
      }
    },
    methods: {
      handleSizeChange (val) {
        this.curSize = val
        this.$emit('change', {
          page: this.curPage,
          size: this.curSize
        })
      },
      handleCurrentChange (val) {
        this.curPage = val
        this.$emit('change', {
          page: this.curPage,
          size: this.curSize
        })
      }
    }
  }
</script>
